<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        *{margin:0px;padding:0px;list-style: none}

        #list{
            width:140px;
            height:90px;
            border:1px solid #999;
            font-size:16px;
            text-align: center;
            padding:10px 10px;
            box-shadow: 3px 3px 3px #eee;
            position:absolute;
            top:100px;
            left:100px;
            display:none;
        }
    </style>
</head>
<body >
    <ul id="list">
        <li>复制</li>
        <li>黏贴</li>
        <li>迅雷下载</li>
        <li>播放器打开</li>
    </ul>
    
    
</body>
    <script>
        var list = document.getElementById("list");


        var lis = list.getElementsByTagName("li");

        for (var i  in lis)
        {
            lis[i].onmouseover = function(){
                this.style.backgroundColor = "#eee";
            }

            lis[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }

        document.oncontextmenu = showMenu;



        document.onclick = clearMenu;

        function showMenu(en)
        {
            var x = en.x;
            
            var y = en.y; 

            var subX = 180;

            var subY = 140;

            // console.log(window.innerHeight,y,window.innerHeight-y);return false;
            


            if(window.innerWidth - x < subX)
            {
                 list.style.left = x-subX+"px";

                 list.style.top = y+"px";   
            }

            if(window.innerHeight - y < subY)
            {
                list.style.left = x+"px";

                list.style.top = y-subY+"px";
            }
            
            if(window.innerWidth - x > subX && window.innerHeight - y > subY)
            {   
                list.style.left = x+"px";
            
                list.style.top = y+"px";
            }

            if(window.innerWidth - x < subX && window.innerHeight - y < subY)
            {
                list.style.left = x-subX+"px";
                
                list.style.top = y-subY+"px";
            }

            console.log(window.innerWidth,x,window.innerHeight,y,list.style.left,list.style.top);

            list.style.display = "block";

            return false;
        }

        function clearMenu()
        {
            list.style.display = "none";
        }


    </script>
</html>